<template>
  <div class="box">
    <div class="top">
      <p><i class="el-icon-menu"></i>收银</p>
      <hr />
    </div>
    <div class="center">
      <div class="center-top">
        <p>条码</p>
        <el-input
          placeholder="请扫描商品条码"
          v-model="input"
          :disabled="disabled"
          @keyup.native="inputNum"
        >
        </el-input>
        <el-checkbox v-model="checked" @change="changeInput"
          >手动输入条形码</el-checkbox
        >
        <el-button
          type="primary"
          class="chaxun"
          :disabled="chaxunDisabled"
          @click="queryGoods"
          >查询</el-button
        >
      </div>
      <div class="center-bot">
        <el-table :data="showData" border style="width: 660px">
          <el-table-column type="index" label="序号" width="120">
          </el-table-column>
          <el-table-column prop="goods_name" label="商品名称" width="180">
          </el-table-column>
          <el-table-column prop="persent_price" label="单价" width="120">
          </el-table-column>

          <el-table-column prop="num" label="数量" width="120">
            <template slot-scope="scope">
              <input
                type="number"
                placeholder="1"
                class="shuliang"
                @change="changenum(scope)"
                @blur="fuzhi(scope)"
                v-model="scope.row.num"
                @input="
                  scope.row.num = Number($event.target.value.replace(/\D+/, ''))
                "
              />
            </template>
          </el-table-column>
          <el-table-column label="金额" width="115" prop="amount">
          </el-table-column>
        </el-table>
        <div class="fengye">
          <el-pagination
            :page-size="table.pagesize"
            layout="prev, pager, next"
            :total="table.total"
            :current-page="table.page"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
      </div>
      <div class="queding">
        <el-button type="primary" @click="settlement">结账</el-button>
      </div>
      <div>
        <zhangdan
          :dialogTableVisible="dialogTableVisible"
          :gridData="gridData"
          @closezd="closezd"
          @close="close"
          :totalMoney="totalMoney"
          :discount="discount"
          :date="date"
          :tableData="tableData"
          @changeGrid="changeGrid"
          :serial_number="serial_number"
        ></zhangdan>
      </div>
    </div>
    <el-dialog
      title="查询结果"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <p>
          商品货号：<span>{{ goods.barcode }}</span>
        </p>
        <p>
          商品名称：<span>{{ goods.goods_name }}</span>
        </p>
        <p>
          商品价格：<span>{{ goods.persent_price }}</span
          >元/<span>{{ goods.unit }}</span>
        </p>
        <div v-show="[goods.discount_name ? true : false]">
          {{ goods.discount_name }}:{{ goods.discount_rate }}
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="addPurchase">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import zhangdan from "./zhangdan/zhangdan.vue";
export default {
  components: {
    zhangdan,
  },
  //name: "ShangHuo",
  data() {
    return {
      excelData: [],
      input: "",
      goods: {},
      price: "",
      date: "",
      disabled: false,
      chaxunDisabled: true,
      showzd: false,
      table: {
        pagesize: 5,
        total: 0,
        page: 1,
      },
      gridData: [],
      tableData: [],
      totalMoney: 0,
      dialogVisible: false,
      dialogTableVisible: false,
      formLabelWidth: "120px",
      discount: [],
      serial_number: "",
      arr: [],
    };
  },
  methods: {
    changeInput() {
      if (this.checked) {
        this.disabled = false;
        this.chaxunDisabled = false;
      } else {
        this.chaxunDisabled = true;
      }
    },
    addPurchase() {
      this.dialogVisible = false;

      if (this.tableData == "") {
        this.tableData.push(this.goods);
      } else {
        for (var i = 0; i < this.tableData.length; i++) {
          //查询货号是否存在，存在就把对应物品数量加1
          if (this.goods.barcode == this.tableData[i].barcode) {
            console.log("相同", this.goods.barcode, this.tableData);
            var goods1 = this.tableData[i];
            goods1.num += 1;
            if (goods1.discount_rate) {
              goods1.amount = (
                goods1.num *
                goods1.persent_price *
                goods1.discount_rate
              ).toFixed(2);
            } else {
              goods1.amount = (goods1.num * goods1.persent_price).toFixed(2);
            }
            console.log(goods1);
            if (goods1.discount_name == "赠品") {
              goods1.amount = "0";
            }
            this.tableData.splice(i, 1, goods1);
            break;
          } else {
            if (i == this.tableData.length - 1) {
              this.tableData.push(this.goods);
              break;
            }
          }
        }
      }

      this.showData = this.tableData.slice(
        (this.table.page - 1) * this.table.pagesize,
        this.table.page * this.table.pagesize
      );
      this.table.total = this.tableData.length;
      console.log(this.tableData.length);
      this.pagecount = this.total;
    },
    changePage(res) {
      console.log(res);
      this.table.page = res;
      this.showData = this.tableData.slice(
        (this.table.page - 1) * this.table.pagesize,
        this.table.page * this.table.pagesize
      );
    },
    changenum(e) {
      console.log(this.tableData);
      console.log(e);
      if (e.row.num <= 0) {
        let abc = e.$index;
        console.log(abc);
        this.tableData.splice(abc, 1);
        this.table.total = this.tableData.length;
      } else if (e.row.num > this.tableData[e.$index].quantity_in_stock) {
        //库存数量
        console.log(2);
        e.row.num = this.tableData[e.$index].quantity_in_stock;
        if (e.row.discount_rate) {
          //打折
          e.row.amount = e.row.num * e.row.persent_price * e.row.discount_rate;
        } else {
          e.row.amount = e.row.persent_price * e.row.num;
        }

        var goods2 = e.row;
        if (goods2.discount_name == "赠品") {
          goods2.amount = 0;
        }
        goods2.amount = e.row.amount.toFixed(2);
        goods2.num = e.row.num;
        this.tableData.splice(
          e.$index + (this.table.page - 1) * this.table.pagesize,
          1,
          goods2
        );
      } else {
        console.log(3);
        if (e.row.discount_rate) {
          //打折
          e.row.amount = e.row.num * e.row.persent_price * e.row.discount_rate;
        } else {
          e.row.amount = e.row.persent_price * e.row.num;
        }

        var goods3 = e.row;
        if (goods3.discount_name == "赠品") {
          goods3.amount = 0;
        }
        goods3.amount = e.row.amount.toFixed(2);
        goods3.num = e.row.num;
        this.tableData.splice(
          e.$index + (this.table.page - 1) * this.table.pagesize,
          1,
          goods3
        );
        console.log(this.tableData);
      }
    },
    fuzhi(e) {
      if (e.row.discount_rate) {
        //打折
        e.row.amount = e.row.num * e.row.persent_price * e.row.discount_rate;
      } else {
        e.row.amount = e.row.persent_price * e.row.num;
      }
      var goods4 = e.row;
      if (goods4.discount_name == "赠品") {
        goods4.amount = 0;
      }
      goods4.amount = e.row.amount.toFixed(2);
      goods4.num = e.row.num;
      this.tableData.splice(
        e.$index + (this.table.page - 1) * this.table.pagesize,
        1,
        goods4
      );
      this.showData = this.tableData.slice(
        (this.table.page - 1) * this.table.pagesize,
        this.table.page * this.table.pagesize
      );
    },
    handleClose() {},
    checked() {},
    settlement() {
      this.dialogTableVisible = true;
      this.discount = [];
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].comment) {
          if (this.discount == "") {
            this.discount.push({
              comment: this.tableData[i].comment,
              price:
                this.tableData[i].persent_price * this.tableData[i].num -
                this.tableData[i].amount,
            });
            if (this.gridData.discount_name == "赠品") {
              this.discount.push({
                comment: this.tableData[i].comment,
                price: this.tableData[i].persent_price * this.tableData[i].num,
              });
            }
          }
          if (i > 0) {
            for (var k = 0; k < this.discount.length; k++) {
              if (this.tableData[i].comment == this.discount[k].comment) {
                this.discount[k].price +=
                  this.tableData[i].persent_price * this.tableData[i].num -
                  this.tableData[i].amount;
                if (this.gridData.discount_name == "赠品") {
                  this.discount[k].price +=
                    this.tableData[i].persent_price * this.tableData[i].num;
                }
              } else {
                if (k == this.discount.length - 1) {
                  if (this.gridData.discount_name == "赠品") {
                    this.discount.push({
                      comment: this.tableData[i].comment,
                      price:
                        this.tableData[i].persent_price * this.tableData[i].num,
                    });
                  } else {
                    this.discount.push({
                      comment: this.tableData[i].comment,
                      price:
                        this.tableData[i].persent_price *
                          this.tableData[i].num -
                        this.tableData[i].amount,
                    });
                  }
                }
              }
            }
          }
        }
      }

      console.log(this.tableData, this.discount);
      var day2 = new Date();
      day2.setTime(day2.getTime());
      let hh = day2.getHours();
      let mf =
        day2.getMinutes() < 10 ? "0" + day2.getMinutes() : day2.getMinutes();
      this.date =
        day2.getFullYear() +
        "-" +
        (day2.getMonth() + 1) +
        "-" +
        day2.getDate() +
        " " +
        hh +
        ":" +
        mf;
      this.gridData = this.tableData;

      this.totalMoney = 0;
      for (var j = 0; j < this.gridData.length; j++) {
        if (this.gridData[j].discount_name == "赠品") {
          this.gridData[j].amount = "0";
        }
        this.totalMoney = parseFloat(this.gridData[j].amount) + this.totalMoney;
      }
      this.totalMoney = this.totalMoney.toFixed(2);
      for (var m = 0; m < this.gridData.length; m++) {
        if (this.gridData[m].discount_name == "赠品") {
          this.gridData[m].amount = "赠品";
        }
      }
    },
    changeGrid() {
      this.gridData = this.gridData.map((item) => {
        item.num = item.num.toString();
        item.amount = item.amount.toString();
        return item;
      });
    },
    closezd() {
      this.dialogTableVisible = false;
    },
    close() {
      this.dialogTableVisible = false;
      this.tableData = [];
    },
    queryGoods() {
      if (this.input != "") {
        this.$axios({
          url: "/counter/scanning",
          method: "post",
          data: {
            barCode: this.input,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            console.log(res.data);
            this.goods = res.data.data[0][0];
            this.serial_number = res.data.data[1][0].serial_number;
            this.dialogVisible = true;
            this.goods.num = 1;
            console.log(this.goods);
            if (this.goods.discount_rate) {
              //打折的情况
              console.log("1111");
              this.goods.amount =
                this.goods.persent_price * this.goods.discount_rate;
            } else {
              this.goods.amount = this.goods.persent_price;
              console.log(this.goods.amount);
            }
            if (this.goods.discount_name == "赠品") {
              this.goods.amount = "0";
            }
          }
          if (res.data.code == 501) {
            alert(res.data.msg);
          }
        });
      }
    },
    inputNum() {
      console.log(this.checked);
      if (!this.checked) {
        console.log("键盘输入", this.checked);
        this.input = "";
        if (this.input != "") {
          this.$axios({
            url: "/counter/scanning",
            method: "post",
            data: {
              barCode: this.input,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              console.log(res.data.data[0]);
              this.goods = res.data.data[0];
              this.serial_number = res.data.data[1][0].serial_number;
              this.dialogVisible = true;
              this.goods.num = 1;
              if (this.goods.discount_rate != "") {
                //打折的情况
                this.goods.amount =
                  this.goods.persent_price * this.goods.discount_rate;
              } else {
                this.goods.amount = this.goods.persent_price;
                console.log(this.goods.amount);
              }
              this.addPurchase();
            }
          });
        }
      }

      // let timenow=target.timeStamp;
      // console.log(timenow);
      // let iscontu=true;
      // this.arr.push(timenow);
      // let i;
      // for(i in this.arr){
      //   if(Math.ceil(this.arr[this.arr.length-1])-Math.ceil(this.arr[this.arr.length-2])<30){
      //     console.log("扫描枪");

      //     iscontu=true;
      //   }else{
      //     iscontu=false;
      //   }
      //   if(i>0&&this.arr.length==parseInt(i)+1){
      //     if(iscontu==true){

      //     }
      //   }
      // }
    },
  },
  computed: {
    showData: {
      get() {
        return this.tableData.slice(
          (this.table.page - 1) * this.table.pagesize,
          this.table.page * this.table.pagesize
        );
      },
      set() {},
    },
  },
  watch: {
    // showData: {
    //   handler: function (data, oldData) {
    //     console.log(data, oldData);
    //   },
    //   deep: true,
    // },
    // input: {
    //   handler: function (newInput, oldInput) {
    //     console.log(newInput, oldInput);
    //   },
    //   deep: true,
    // },
  },
  mounted() {
    this.checked = false;
  },
};
</script>
<style scoped>
.top {
  font-size: 17px;
  line-height: 25px;
}
.top i {
  font-size: 25px;
  margin-right: 7px;
}
.box {
  margin-left: 20px;
  margin-right: 50px;
  width: 100%;
  height: 100%;
}
.center {
  width: 92%;
  height: 88%;
  margin-top: 20px;
  border-radius: 20px;
  padding-left: 70px;
  background-color: white;
  position: relative;
}
.el-input {
  width: 200px;
  margin-right: 20px;
}
.center-top {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 30px;
}
.center-top p,
.center-top el-input,
.el-checkbox {
  margin-right: 20px;
}
.center-top p {
  padding-top: 10px;
}
.excelBox {
  margin-left: 200px;
}
.el-table {
  margin-top: 20px;
}
.td {
  text-align: center;
}
.fengye {
  width: 60%;
  padding-top: 15px;
}
.el-pagination {
  display: inline;
  float: right;
}
.queding {
  position: absolute;
  right: 10%;
  top: 40%;
}
.el-button {
  background-color: blueviolet;
  width: 150px;
}
.shuliang {
  width: 70px;
  height: 26px;
  border: 0;
  text-align: center;
}
input[type="number"]::before {
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}
.chaxun {
  width: 80px;
  margin-left: 20px;
}
.msg span {
  margin-right: 30px;
  margin-left: 10px;
}

.fengye el-pagination {
  margin-left: 60px;
}
</style>
